<template>
  <div class="statistForm">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <h2>统计报表</h2>
      </div>
      <el-row>
        <el-col :span="15">
          <span>时间区间:</span>
          <el-date-picker
            class="date"
            size="small"
            @change="selectTime"
            placeholder="选择查询时间"
            v-model="times"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="8">
          <span>产品名称:</span>
          <el-input
            class="bot"
            size="small"
            clearable
            placeholder="请输入要查询的产品名称"
            v-model.trim="search.goodName"
          ></el-input>
        </el-col>
        <el-col class="btm" :span="15">
          <span>订单状态:</span>
          <el-select
            @change="selectStatus"
            multiple
            size="small"
            class="bot date"
            clearable
            v-model="status"
            placeholder="请选择订单状态"
          >
            <el-option
              v-for="item in orderStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col class="btm" :span="8">
          <el-button type="primary" size="small" @click="doSearch"
            >查询</el-button
          >
          <el-button type="primary" size="small" @click="outPut">导出报表</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="always" class="orderCard" :body-style="{ padding: '20px' }">
        <el-table
        v-loading="loading"
        :data="orderList"
        border
        :fit="true"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          prop="goodName"
          fixed
          label="商品名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="originalPrice"
          label="产品单价"
        >
        <template slot-scope="scope"
          >{{ Number(scope.row.originalPrice) / 100 }}
        </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="totalCount"
          label="销量"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="showShelfTime"
          label="最近上架日期"
          width="180"
        >
          <template slot-scope="scope"
            >{{ scope.row.showShelfTime | timeFilter }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="daySaleCount"
          label="在架天数"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="totalPrice"
          label="销售额"
        >
        <template slot-scope="scope"
          >{{ Number(scope.row.totalPrice) / 100 }}
        </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="category"
          label="是否在泰康优选"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="isShowOrder"
          label="是否在前6位"
          width="100"
        >
        </el-table-column>
        </el-table>
        <el-pagination
        style="text-align: right; margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.size"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </el-card>
    
  </div>
</template>

<script>
import modelApi from "@/api/lejv/model"
import _ from "lodash"; //引入lodash
export default {
  name: "statistForm",
  data() {
    return {
      times:"",
      status:'',
      search: {
        goodName: "",
        startTime: "",
        endTime: "",
        status: "",
      },
      loading:false,
      orderList:[],
      page: {
        start: 1,
        limit: 10,
        total: 10,
        size: [10, 20, 30],
      },
      orderStatus: [
        {
          value: "1",
          label: "待付款",
        },
        {
          value: "3",
          label: "待发货",
        },
        {
          value: "4",
          label: "已发货",
        },
        {
          value: "5",
          label: "已完成",
        },
        {
          value: "6",
          label: "已取消",
        },
        {
          value: "7",
          label: "退款中",
        },
        {
          value: "8",
          label: "已退款",
        },
      ],
    };
  },
  computed: {},
  filters:{
    timeFilter(val){
      if(val){
        return val.substring(0,10)
      }
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    //查询
    doSearch() {
      if(this.times == "" || this.times == null){
        this.$message({
          message:"请选择查询时间!",
          type:"warning"
        })
        this.search.startTime = ""
        this.search.endTime = ""
      }else{
        this.page.start = 1  //查询前需重置页数
        this.getList()
      }
    },
    //导出
    outPut() {
      if(this.times == "" || this.times == null){
        this.$message({
          message:"请选择时间!",
          type:"warning"
        })
        this.search.startTime = ""
        this.search.endTime = ""
      }else{
        let params = {
          ...this.search,
        };
        params = _.pickBy(params, (item) => item); //使用lodash进行过滤参数为空的搜索条件
        modelApi.exportModelList(params)
        .then(res=>{
          // console.log(res);
          let elink = document.createElement('a');
          elink.download = "统计报表.xls";
          elink.style.display = 'none';
          let blob = new Blob([res], {type: 'application/vnd.ms-excel'}); //js原生blob对象  处理后台传递的文档流
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
        })
      }
    },
    //选择时间
    selectTime(e) {
      if(e){
        this.search.startTime = e[0]
        this.search.endTime = e[1]
        // console.log(this.search);
      }
    },
    //选择状态
    selectStatus(val) {
      this.search.status = val.join(",")
      // console.log(val,this.search.status);
    },
    //获取列表
    getList(){
      this.loading = true;
      let params = {
        ...this.search,
        pageSize: this.page.limit,
        pageNum: this.page.start
      };
      params = _.pickBy(params, (item) => item); //使用lodash进行过滤参数为空的搜索条件
      modelApi.getModelList(params)
      .then(res=>{
        console.log(res);
        if(res.code == 0){
          this.loading = false;
          if(res.data){
            this.orderList = res.data.orders
            this.page.total = res.data.totalElements
          }else{
            this.orderList = []
            this.page.total = 0
          }
        }
      })
      .catch(res=>{
        this.loading = false;
        // if(res.code != 401 && res.code != 403 && res.code != 500){
        //   this.$message({
        //     type:"error",
        //     message:"请求数据失败!"
        //   })
        // }
      })
    },
    //分页切换
    handleSizeChange(val) {
      this.page.limit = val;
      this.getList();
    },
    //分页
    handleCurrentChange(val) {
      this.page.start = val;
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
.statistForm {
  margin: 20px;
  h2 {
    margin: 0;
  }
  .bot {
    width: 200px;
    margin-left: 5px;
  }
  .date {
    margin-left: 5px;
    width: 350px;
  }
  .btm {
    margin-top: 20px;
  }
  span {
    font-size: 14px;
  }
  .orderCard{
      margin-top: 20px;
  }
}
</style>
